<template>
	<view v-if="false">
	<nav-header title="企业认证" custom-nav>
		<template v-slot:right>
		</template>
	</nav-header>
	<view class="container">
		<view class="container-top">
		<view style="font-size: 46rpx; font-weight: bold;">请选择认证方式</view>
		<view style="color: #7F7F7F;">根据相关法规，您需要任选一种认证方式，验证您与该企业所属关系的真实性</view>
		</view>
		
	<view class="container-certification">
	    <view class="content">
	        <view class="title">营业执照认证</view>
	        <view class="description">上传营业执照原件照片验证</view>
	    </view>
		
		<view class="button">去认证<up-icon name="arrow-right"></up-icon></view>	   
	</view>
		
	<view class="container-certification" style="padding-top:4rpx">
	    <view class="content">
	        <view class="title">法人认证</view>
	        <view class="description">验证法人的人脸信息</view>
	    </view>
		
		<view class="button">去认证<up-icon name="arrow-right"></up-icon></view>	   
	</view>
<view class="bottom">验证过程中，平台会收集您的拍摄信息，以便用于验证。平台承诺所有在认证过程中填写的信息不会向第三方透露。</view>
	</view>
 </view>
 
 <view v-if="false" class="container">
	 <nav-header title="企业认证" custom-nav>
	 	<template v-slot:right>
	 	</template>
	 </nav-header>
	 <view>
	 <view style="font-size: 46rpx; font-weight: bold;">恭喜您已完成验证！</view>
	 <!-- 营业执照 -->
	 <view class="container-img">
		 <image src="https://photo.16pic.com/00/01/45/16pic_145325_b.jpg" class="image"/>
		 <image src="https://photo.16pic.com/00/01/45/16pic_145325_b.jpg" class="image"/>
	 </view>
	 <view>
		  <view class="item">
		       <view class="label">企业名称:</view>
		       <view class="value">内蒙古星数通科技有限公司</view>
		     </view>
		     <view class="item">
		       <view class="label">社会信用代码:</view>
		       <view class="value">91441900MACYD0JR2F</view>
		     </view>
		     <view class="item">
		       <view class="label">注册地址:</view>
		       <view class="value">广东省东莞市大岭山镇大岭山兴富一街六巷2号603室</view>
		     </view>
		     <view class="item">
		       <view class="label">注册资本:</view>
		       <view class="value">100万</view>
		     </view>
		     <view class="item">
		       <view class="label">股东信息:</view>
		       <view class="value">易中星:100万</view>
		     </view>
		     <view class="item">
		       <view class="label">法人联系方式:</view>
		       <view class="value">18826877879</view>
		     </view>
		     <view class="item">
		       <view class="label">银行卡号:</view>
		       <view class="value">xxxxxxxxxxxxxxxxx</view>
		     </view>
		     <view class="item">
		       <view class="label">开户行:</view>
		       <view class="value">中国工商银行大岭山支行</view>
		     </view>
		     <view class="item">
		       <view class="label">人员规模:</view>
		       <view class="value">1000人以上</view>
		     </view>
		     <view class="item">
		       <view class="label">成立日期:</view>
		       <view class="value">2023-09-27</view>
		     </view>
		     <view class="item">
		       <view class="label">企业经营范围:</view>
		       <view class="value">一般项目：人工智能行业应用系统集成服务；智能机器人的研发；人工智能应用软件开发；人工智能公共服务平台技术咨询服务；人工智能公共数据</view>
		     </view>
		     <view class="item">
		       <view class="label">认证状态:</view>
		       <view class="value">已通过 2024-11-23 17:34:57</view>
		     </view>
	 </view>
	 </view>
	 <button class="custom-button">修改信息</button>
 </view>
 
 
 <view v-else  class="container">
	 <nav-header title="营业执照认证" custom-nav>
	 	<template v-slot:right>
	 	</template>
	 </nav-header>
	 <!-- 营业执照 -->
	 <view class="container-img">
		 <view class="img-item">
			 <image src="https://photo.16pic.com/00/01/45/16pic_145325_b.jpg" class="image"/>
			 <view class="img-text">营业执照原件照片</view>
		 </view>
	 		
		 <view class="img-item">
			 <image src="https://photo.16pic.com/00/01/45/16pic_145325_b.jpg" class="image"/>
			 <view class="img-text">经营许可证原件照片</view>
		 </view>	
	 </view>
	 <view class="info">我们将收集您的证件用于识别企业信息，用于验证真实性。</view>
	<uni-forms label-position="top" ref="form" :model="companyForm">
	    <view class="info">基本信息</view>
	    <uni-forms-item label="企业名称" name="companyName" class="custom-label">
	      <uni-easyinput type="text" v-model="companyForm.companyName" placeholder="请输入企业名称" />
	    </uni-forms-item>
	    <uni-forms-item label="社会信用代码" label-width="180rpx" name="creditCode">
	      <uni-easyinput type="text" v-model="companyForm.creditCode" placeholder="请输入社会信用代码" />
	    </uni-forms-item>
	    <uni-forms-item label="注册地址" name="registeredAddress">
	      <uni-easyinput type="text" v-model="companyForm.registeredAddress" placeholder="请输入注册地址" />
	    </uni-forms-item>
	    <uni-forms-item label="注册资本" name="registeredCapital">
	      <uni-easyinput type="text" v-model="companyForm.registeredCapital" placeholder="请输入注册资本" />
	    </uni-forms-item>
	    <uni-forms-item label="成立日期" name="establishmentDate">
	      <!-- <uni-datetime-picker type="datetime" v-model="companyForm.establishmentDate" /> -->
		  禁止使用uni默认组件
	    </uni-forms-item>
	    <uni-forms-item label="法人名称" name="legalName" label-width="180rpx">
	      <uni-easyinput type="text" v-model="companyForm.legalName" placeholder="请输入法人名称" />
	    </uni-forms-item>
	    <uni-forms-item label="法人联系方式" name="legalContact" label-width="180rpx">
	      <uni-easyinput type="text" v-model="companyForm.legalContact" placeholder="请输入法人联系方式" />
	    </uni-forms-item>
	    <uni-forms-item label="人员规模" name="employeeScale">
	      <uni-data-select
	        v-model="companyForm.employeeScale"
	        :localdata="employeeScaleOptions"
	        @change="handleEmployeeScaleChange"
	      ></uni-data-select>
	    </uni-forms-item>
	    <uni-forms-item label="所属行业" name="industry">
	      <uni-easyinput type="text" v-model="companyForm.industry" placeholder="请输入所属行业" />
	    </uni-forms-item>
	    <uni-forms-item label="经营范围" name="businessScope">
	      <uni-easyinput type="textarea" v-model="companyForm.businessScope" placeholder="请输入经营范围" />
	    </uni-forms-item>
	    <uni-forms-item label="银行卡号" name="bankAccount">
	      <uni-easyinput type="text" v-model="companyForm.bankAccount" placeholder="请输入银行卡号" />
	    </uni-forms-item>
	    <uni-forms-item label="开户行" name="bankName">
	      <uni-easyinput type="text" v-model="companyForm.bankName" placeholder="请输入开户行" />
	    </uni-forms-item>
	  </uni-forms>
	   <button class="custom-button" @tap="handleSubmitReview">提交审核</button>
 </view>
 
 
</template>

<script setup>
import { ref, reactive } from 'vue';
// 创建假数据
const employeeScaleOptions = ref([
  { value: '1', text: '1-10人' },
  { value: '2', text: '11-50人' },
  { value: '3', text: '51-100人' },
  { value: '4', text: '101-500人' },
  { value: '5', text: '500人以上' }
]);

// 初始化表单数据
const companyForm = reactive({
  companyName: '示例企业',
  creditCode: '123456789012345678',
  registeredAddress: '北京市朝阳区',
  registeredCapital: '1000万元',
  establishmentDate: '2023-01-01 00:00:00',
  legalName: '张三',
  legalContact: '13812345678',
  employeeScale: '1',
  industry: '信息技术',
  businessScope: '软件开发、技术服务',
  bankAccount: '6222081234567890123',
  bankName: '中国工商银行'
});

// 处理 change 事件
const handleEmployeeScaleChange = (e) => {
  console.log('选中的值:', e.value);
};

// 定义点击事件处理方法
const handleSubmitReview = () => {
  // 这里可以添加你的逻辑，例如验证表单数据、发送请求等
  console.log('提交审核', companyForm);
};
</script>

<style scoped>
	 .container{
		margin: 20rpx;
		margin-bottom: 100rpx;
	 }
	.container-top{
		
	}
	.container-certification {
	    display: flex;
	    align-items: center;
	    padding: 50rpx;
		justify-content: space-between;
	}
	
	.content {
	    display: flex;
	    flex-direction: column;
	    margin-right: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
	    font-weight: bold;
	}
	
	.description {
		padding-top: 20rpx;
	    font-size: 28rpx;
	    color: #666;
	}
	
	.button {
		display: flex;
		align-items: center; /* 垂直居中对齐 */
	    color: #7F7F7F;
		gap: 8rpx;
	
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 40rpx); /* 减去两边的边距 */
		margin: 0 20rpx; /* 左右边距为 20rpx */
		font-size: 28rpx;
		margin-bottom: 25rpx;
		color: #7F7F7F;
		
	}

	.container-img{
		display: flex; /* 使用 Flexbox 布局 */
		align-items: center; /* 垂直居中对齐 */
		align-items: center;
	}

	.image {  
	    text-align: center; /* 使文本水平居中对齐 */
	    padding: 10rpx; /* 可选：添加内边距 */
		height: 200rpx;
		width: 350rpx;
	}
	.item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}
	.img-item{
	  text-align: center; /* 使文字居中 */
	}
	.img-text{
	 font-size: 26rpx;
	}
	
	.label {
	  width: 120px; /* 可以根据需要调整宽度 */
	  /* font-weight: bold; */
	}
	
	.value {
	  flex: 1;
	}
	.custom-button {
	  margin-top: 100rpx;
	  background-color: #1989FA; /* 修改背景色为蓝色 */
	  color: white; /* 文字颜色为白色 */
	  border: none; /* 去掉边框 */
	  border-radius: 5px; /* 圆角 */
	  padding: 10px 20px; /* 内边距 */
	  font-size: 16px; /* 字体大小 */
	  cursor: pointer; /* 鼠标悬停时显示指针 */
	
	}
	
	
	.info{
		color: #7F7F7F;
	}
	:deep(.uni-forms-item__label) {
		color: black;
	}
	:deep(.uni-forms-item) {
		margin-bottom: 12rpx;
	}
</style>
